import React, { useState, useCallback } from 'react'
import ExportDialog from './ExportDialog'
import StyleManager from './StyleManager'
import exportManager from '../utils/exportManager'

const Editor: React.FC = () => {
  const [content, setContent] = useState('')
  const [title, setTitle] = useState('')
  const [isGenerating, setIsGenerating] = useState(false)
  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false)
  const [styleConfig, setStyleConfig] = useState<{ theme: string; headingStyles: Record<number, React.CSSProperties> }>({
    theme: 'default',
    headingStyles: {
      1: { fontSize: '24px', fontWeight: 700, margin: '20px 0 16px 0', color: '#333' },
      2: { fontSize: '20px', fontWeight: 600, margin: '16px 0 12px 0', color: '#333' },
      3: { fontSize: '16px', fontWeight: 600, margin: '12px 0 8px 0', color: '#333' },
    }
  })

  // 计算内容字数的函数
  const getCharacterCount = (text: string): number => {
    return text.length;
  }

  const generateContent = async () => {
    setIsGenerating(true)
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          topic: title || '人工智能的发展趋势',
          type: 'article'
        }),
      })
      
      if (response.ok) {
        const data = await response.json()
        setContent(data.content)
        if (!title) setTitle(data.title)
      } else {
        // 模拟生成内容
        const mockContent = `# ${title || '人工智能的发展趋势'}

## 引言

人工智能（AI）正在快速发展，改变着我们的生活和工作方式。从自动驾驶汽车到智能助手，AI技术已经渗透到各个领域。

## 主要发展方向

### 1. 机器学习的进步
- 深度学习算法的优化
- 更高效的训练方法
- 模型压缩和部署技术

### 2. 自然语言处理
- 大语言模型的突破
- 多模态理解能力
- 实时对话系统

### 3. 计算机视觉
- 图像识别精度提升
- 3D视觉理解
- 实时视频分析

## 应用前景

AI技术将在以下领域发挥重要作用：

1. **医疗健康**: 辅助诊断、药物研发
2. **教育培训**: 个性化学习、智能辅导
3. **智能制造**: 自动化生产、质量控制
4. **金融服务**: 风险评估、智能投顾

## 结语

随着技术的不断进步，人工智能将为人类社会带来更多便利和机遇。我们需要在享受AI带来的好处的同时，也要关注其可能带来的挑战和风险。

---

*本文由 AI 助手生成，仅供参考。*`
        setContent(mockContent)
        if (!title) setTitle('人工智能的发展趋势')
      }
    } catch (error) {
      console.error('生成内容失败:', error)
      alert('生成内容失败，请稍后重试')
    } finally {
      setIsGenerating(false)
    }
  }

  const copyToClipboard = () => {
    // 生成适合微信公众号的纯文本格式
    // 1. 保留标题结构，但不添加HTML标签
    // 2. 转换粗体和斜体为微信支持的格式
    // 3. 保留列表结构
    const wechatFormat = content
      // 保留标题文本，不添加HTML标签
      .replace(/^# (.*$)/gm, '$1\n')
      .replace(/^## (.*$)/gm, '$1\n')
      .replace(/^### (.*$)/gm, '$1\n')
      // 转换粗体格式
      .replace(/\*\*(.*?)\*\*/g, '$1')
      // 转换斜体格式
      .replace(/\*(.*?)\*/g, '$1')
      // 保留列表符号
      .replace(/^\- (.*$)/gm, '• $1')
      // 保留有序列表
      .replace(/^\d+\. (.*$)/gm, '$&')
      // 处理段落格式，确保适当的换行
      .replace(/\n\n/g, '\n\n')
      // 保留水平线
      .replace(/---/g, '\n---\n')

    navigator.clipboard.writeText(wechatFormat).then(() => {
      alert('已复制微信公众号格式到剪贴板！')
    }).catch(() => {
      alert('复制失败，请手动复制内容')
    })
  }

  /**
   * 打开导出对话框
   */
  const openExportDialog = () => {
    setIsExportDialogOpen(true)
  }

  /**
   * 关闭导出对话框
   */
  const closeExportDialog = () => {
    setIsExportDialogOpen(false)
  }

  /**
   * 处理导出格式选择
   */
  const handleExport = async (format: string, options?: { filename?: string, includeTitle?: boolean }) => {
    try {
      await exportManager.exportContent(content, title, format, options)
      setIsExportDialogOpen(false)
      alert('导出成功！')
    } catch (error) {
      console.error('导出失败:', error)
      alert(`导出失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  // 处理样式变更
  const handleStyleChange = useCallback((newStyleConfig: typeof styleConfig) => {
    setStyleConfig(newStyleConfig)
  }, [])

  return (
    <div style={{ minHeight: '100vh', background: '#f5f7fa' }}>
      {/* Header */}
      <header style={{
        background: 'white',
        borderBottom: '1px solid #e1e5e9',
        padding: '16px 0'
      }}>
        <div className="container" style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            <h1 style={{ fontSize: '20px', fontWeight: '600', color: '#333' }}>
                WechatAiWriter
              </h1>
          </div>
          
          <div style={{ display: 'flex', gap: '12px' }}>
            <button 
              onClick={generateContent}
              disabled={isGenerating}
              style={{
                background: isGenerating ? '#ccc' : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                border: 'none',
                padding: '10px 20px',
                borderRadius: '6px',
                fontSize: '14px',
                fontWeight: '600',
                cursor: isGenerating ? 'not-allowed' : 'pointer'
              }}
            >
              {isGenerating ? '生成中...' : 'AI生成内容'}
            </button>
            <button 
              onClick={copyToClipboard}
              style={{
                background: '#28a745',
                color: 'white',
                border: 'none',
                padding: '10px 20px',
                borderRadius: '6px',
                fontSize: '14px',
                fontWeight: '600',
                cursor: 'pointer'
              }}
            >
              复制微信格式
            </button>
            <button 
              onClick={openExportDialog}
              style={{
                background: '#17a2b8',
                color: 'white',
                border: 'none',
                padding: '10px 20px',
                borderRadius: '6px',
                fontSize: '14px',
                fontWeight: '600',
                cursor: 'pointer'
              }}
            >
              导出文章
            </button>
          </div>
        </div>
      </header>

      {/* 导出对话框 */}
      <ExportDialog
        isOpen={isExportDialogOpen}
        onClose={closeExportDialog}
        onExport={handleExport}
        availableFormats={exportManager.getSupportedFormats()}
        defaultFilename={title || 'article'}
      />

      {/* Main Editor */}
      <main className="container" style={{ padding: '24px 20px' }}>
        {/* Title Input */}
        <div style={{ marginBottom: '24px' }}>
          <input
            type="text"
            placeholder="请输入文章标题..."
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            style={{
              width: '100%',
              padding: '16px',
              border: '1px solid #e1e5e9',
              borderRadius: '8px',
              fontSize: '18px',
              fontWeight: '600',
              background: 'white'
            }}
          />
        </div>

        {/* Editor Container */}
        <div className="editor-container">
          {/* Style Manager Panel */}
          <StyleManager 
            content={content}
            onStyleChange={handleStyleChange}
          />
          
          {/* Editor Panel */}
          <div className="editor-panel">
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '16px'
            }}>
              <h3 style={{ fontSize: '16px', fontWeight: '600', color: '#333' }}>
                Markdown 编辑器
              </h3>
              <div style={{ fontSize: '12px', color: '#999' }}>
                支持 Markdown 语法 • 字数: {getCharacterCount(content)}
              </div>
            </div>
            
            <textarea
              className="editor-textarea"
              placeholder="在这里输入或编辑你的文章内容，支持 Markdown 语法..."
              value={content}
              onChange={(e) => setContent(e.target.value)}
              style={{
                width: '100%',
                height: '500px',
                border: '1px solid #e1e5e9',
                borderRadius: '8px',
                padding: '16px',
                fontSize: '14px',
                lineHeight: '1.6',
                resize: 'vertical',
                fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", monospace'
              }}
            />
          </div>

          {/* Preview Panel */}
          <div className="editor-panel">
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '16px'
            }}>
              <h3 style={{ fontSize: '16px', fontWeight: '600', color: '#333' }}>
                预览效果
              </h3>
              <div style={{ fontSize: '12px', color: '#999' }}>
                实时预览
              </div>
            </div>
            
            <div 
              className="preview-content"
              style={{
                border: '1px solid #e1e5e9',
                borderRadius: '8px',
                padding: '16px',
                minHeight: '500px',
                background: 'white',
                lineHeight: '1.8',
                fontSize: '14px'
              }}
              dangerouslySetInnerHTML={{
                __html: content
                  .replace(/^# (.*$)/gm, `<h1 style="font-size: ${styleConfig.headingStyles[1].fontSize}; font-weight: ${styleConfig.headingStyles[1].fontWeight}; margin: ${styleConfig.headingStyles[1].margin}; color: ${styleConfig.headingStyles[1].color};">$1</h1>`)
                  .replace(/^## (.*$)/gm, `<h2 style="font-size: ${styleConfig.headingStyles[2].fontSize}; font-weight: ${styleConfig.headingStyles[2].fontWeight}; margin: ${styleConfig.headingStyles[2].margin}; color: ${styleConfig.headingStyles[2].color};">$1</h2>`)
                  .replace(/^### (.*$)/gm, `<h3 style="font-size: ${styleConfig.headingStyles[3].fontSize}; font-weight: ${styleConfig.headingStyles[3].fontWeight}; margin: ${styleConfig.headingStyles[3].margin}; color: ${styleConfig.headingStyles[3].color};">$1</h3>`)
                  .replace(/\*\*(.*?)\*\*/g, '<strong style="font-weight: 600;">$1</strong>')
                  .replace(/\*(.*?)\*/g, '<em style="font-style: italic;">$1</em>')
                  .replace(/^\- (.*$)/gm, '<li style="margin: 4px 0;">$1</li>')
                  .replace(/^(\d+)\. (.*$)/gm, '<li style="margin: 4px 0; list-style-type: decimal;">$2</li>')
                  .replace(/\n\n/g, '</p><p style="margin: 12px 0; line-height: 1.8;">')
                  .replace(/^(?!<[h|li])(.+)(?![>])$/gm, '<p style="margin: 12px 0; line-height: 1.8;">$1</p>')
                  .replace(/---/g, '<hr style="margin: 20px 0; border: none; border-top: 1px solid #e1e5e9;">')
              }}
            />
          </div>
        </div>
      </main>
    </div>
  )
}

export default Editor